<template>
	<view class="">
		<view class="UCenter-bg">
			<image :src="user.icon ? user.icon : '/static/default.png'" class="png radius" mode="aspectFill" @click="toChooseImage"></image>
			<view v-if="!user.email" class="margin-top-sm" @click="showModal('loginModal')">
				<button class="cu-btn round lg bg-blue shadow text-bold">{{lang == 'cn' ? '登录或创建账户' : 'Sign In or Create Account'}}</button>
			</view>
			<view v-else class="margin-top-sm">
				<text class="text-bold" style="font-size: 30px;">{{user.nickname}}</text>
			</view>
			<image src="https://oss.byteyun.net/images/2020-04-18/wave.gif" mode="scaleToFill" class="gif-wave"></image>
		</view>
		<view class="flex">
			<view class="flex-sub radius margin-sm padding-sm bg-white" @click="toIndex">
				<view class="flex justify-between">
					<view class="cu-avatar round bg-orange">
						<text class="cuIcon-time"></text>
					</view>
					<text class="text-bold text-xl">{{user.email ? user.dayNum : 0}}</text>
				</view>
				<view class="margin-top-sm">
					<text class="text-black">{{lang == 'cn' ? '记忆的天数' : 'Days of memory'}}</text>
				</view>
			</view>
			<view class="flex-sub radius margin-sm padding-sm bg-white" @click="toTimeline">
				<view class="flex justify-between">
					<view class="cu-avatar round bg-blue">
						<text class="cuIcon-edit"></text>
					</view>
					<text class="text-bold text-xl">{{user.email ? user.textNum : 0}}</text>
				</view>
				<view class="margin-top-sm">
					<text class="text-black">{{lang == 'cn' ? '记忆的文字数' : 'Words of memory'}}</text>
				</view>
			</view>
		</view>
		<view class="cu-list menu card-menu margin-top">
			<view class="cu-item arrow" @click="toPrivacy">
				<view class="content">
					<text class="cuIcon-warn text-red"></text>
					<text class="text-grey">{{lang == 'cn' ? '隐私政策' : 'Privacy'}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="toFeedback">
				<view class="content">
					<text class="cuIcon-writefill text-cyan"></text>
					<text class="text-grey">{{lang == 'cn' ? '意见反馈' : 'Feedback'}}</text>
				</view>
			</view>
			<view v-if="user.id" class="cu-item arrow" @click="toLogout">
				<view class="content">
					<text class="cuIcon-settings text-orange"></text>
					<text class="text-grey">{{lang == 'cn' ? '退出登录' : 'Log out'}}</text>
				</view>
			</view>
		</view>
		<view class="cu-list menu card-menu margin-top">
			<view class="cu-item arrow" @click="toInspire">
				<view class="content">
					<text class="cuIcon-creative text-purple"></text>
					<text class="text-grey">{{lang == 'cn' ? '提交灵感提示' :'Submit your inspire'}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="util.to_nav_page('quote/quote')">
				<view class="content">
					<text class="cuIcon-choicenessfill text-yellow"></text>
					<text class="text-grey">{{lang == 'cn' ? '提交名人名言' : 'Submit your quote.'}}</text>
				</view>
			</view>
		</view>
<!-- 		<view class="cu-list menu card-menu margin-top margin-bottom">
			<view class="cu-item arrow">
				<button class="cu-btn content">
					<text class="cuIcon-keyboard text-black"></text>
					<text class="text-grey">{{lang == 'cn' ? '语言设置' : 'Language Setting'}}</text>
				</button>
				<picker @change="toChooseLang" :range="langs">
					<view class="picker">
						{{lang == 'cn' ? '简体中文' : 'English'}}
					</view>
				</picker>
			</view>
		</view> -->
		
		
		<view class="cu-modal bottom-modal" :class="modalName=='loginModal'?'show':''">
			<view class="cu-dialog" style="height: 400px;">
				<view class="cu-bar bg-white">
					<view class="action text-grey" @click="hideModal">{{lang == 'cn' ? '取消登录' : 'Cancel Login'}}</view>
					<view class="action text-blue padding-right" @click="showModal('registModal')">{{lang == 'cn' ? '账户注册' : 'Regist Account'}}</view>
				</view>
				<view class="cu-form-group margin-top">
					<view class="title">{{lang == 'cn' ? '用户邮箱' : 'Email'}}</view>
					<input class="text-left" type="text" :placeholder="lang == 'cn' ? '请输入邮箱' : 'Please input your email'" v-model="login.email"/>
				</view>
				<view class="cu-form-group">
					<view class="title">{{lang == 'cn' ? '用户密码' : 'Password'}}</view>
					<input class="text-left" password="true" :placeholder="lang == 'cn' ? '请输入密码' : 'Please input password.'" v-model="login.password"/>
				</view>
				<view class="padding flex flex-direction margin-top-lg">
					<button class="cu-btn bg-blue lg" @click="toLogin">{{lang == 'cn' ? '立即登录' : 'Login Now'}}</button>
				</view>
			</view>
		</view>
		
		<view class="cu-modal bottom-modal" :class="modalName=='registModal'?'show':''">
			<view class="cu-dialog" style="height: 400px;">
				<view class="cu-bar bg-white">
					<view class=""></view>
					<view class="action text-grey padding-right" @click="hideModal">{{lang == 'cn' ? '取消注册' : 'Cancel Regist'}}</view>
				</view>
				<view class="cu-form-group margin-top">
					<view class="title">{{lang == 'cn' ? '用户昵称' : 'Username'}}</view>
					<input class="text-left" type="text" :placeholder="lang == 'cn' ? '用户昵称' : 'Please input username'" v-model="regist.nickname"/>
				</view>
				<view class="cu-form-group">
					<view class="title">{{lang == 'cn' ? '用户邮箱' : 'Email'}}</view>
					<input class="text-left" type="text" :placeholder="lang == 'cn' ? '请输入邮箱' : 'Please input Email'" v-model="regist.email"/>
				</view>
				<view class="cu-form-group">
					<view class="title">{{lang == 'cn' ? '用户密码' : 'Password'}}</view>
					<input class="text-left" password="true" :placeholder="lang == 'cn' ? '请输入密码' : 'Please input password.'" v-model="regist.password"/>
				</view>
				<view class="padding flex flex-direction margin-top-lg">
					<button class="cu-btn bg-blue lg" @click="toRegist">{{lang == 'cn' ? '立即注册' : 'Please input regist.'}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default{
		data:function(){
			return{
				lang:uni.getStorageSync('lang'),
				
				user:{},
				util:this.util,
				
				login:{},
				regist:{},
				
				langs:['English','简体中文'],
				
				modalName:'',
			}
		},
		methods:{
			toChooseImage:function(){
				if(!uni.getStorageSync('user')){
					this.util.toast("请先登录");
					return;
				}
				uni.chooseImage({
					count:1,
					success: (res) => {
						uni.showLoading({
							title:this.lang == 'cn' ? '上传中' : 'Uploading'
						});
						uni.uploadFile({
							url: this.host + '/tool/uploadImage',
							filePath:res.tempFilePaths[0],
							name:'imgFile',
							success: (res) => {
								var result = JSON.parse(res.data);
								if(result.code==200){
									this.$set(this.user,'icon',result.data.url);
									uni.setStorageSync('user',this.user);
									uni.hideLoading();
									this.util.toast(result.data.msg);
									this.updateHeadImage();
								}else{
									this.util.toast("上传失败");
								}
							}
						});
					}
				});
			},
			updateHeadImage:function(){
				this.user.lang = uni.getStorageSync('lang');
				
				uni.request({
					url:this.host + '/today/updateUserIcon',
					method:'POST',
					header:this.util.header(),
					data:this.user,
					success: (res) => {
						if(res.data.data.flag == 0){
							this.util.toast(res.data.data.msg);
						}
					}
				})
			},
			toPrivacy:function(){
				uni.setStorageSync('privacy_url','https://uniapp.dcloud.io/component/web-view');
				
				this.util.to_nav_page('/pages/mine/web/web');
			},
			toChooseLang:function(e){
				let temp = e.detail.value == 0 ? 'en' : 'cn';
				if(this.lang != temp){
					this.lang = temp;
					
					uni.setStorageSync('lang',this.lang);
					
					uni.setStorageSync('index',true);
					uni.setStorageSync('timeline',true);
				}
				
			},
			toLogout:function(){
				uni.removeStorageSync('user');
				this.user = {};
				
				//添加临时变量
				uni.setStorageSync('index',true);
				uni.setStorageSync('timeline',true);
			},
			toIndex:function(){
				uni.switchTab({
					url:'/pages/index/index',
				})
			},
			toTimeline:function(){
				uni.switchTab({
					url:'/pages/timeline/timeline',
				})
			},
			toFeedback:function(){
				//redirectTo switchTab 页面三种跳转方式 https://uniapp.dcloud.io/api/router?id=redirectto
				uni.navigateTo({
					url:'/pages/mine/feedback/feedback'
				})
			},
			toInspire:function(){
				this.util.to_nav_page('/pages/mine/inspire/inspire');
			},
			showModal:function(name){
				this.modalName = name;
			},
			hideModal:function(){
				this.modalName = '';
			},
			toLogin:function(){
				//进行邮箱 和 密码的校验
				this.login.lang = uni.getStorageSync('lang');
				
				uni.request({
					url:this.host + "/today/userLogin",
					header:this.util.header(),
					method:'POST',
					data:this.login,
					success: (res) => {
						if(res.data.data.flag == 0){
							this.user = res.data.data.user;
							uni.setStorageSync('user',this.user);
							this.modalName = '';
							uni.setStorageSync('index',true);
							uni.setStorageSync('timeline',true);
							this.util.toast(res.data.data.msg);
						}
					}
				});
			},
			toRegist:function(){
				//进行邮箱 和 密码的校验
				this.regist.lang = uni.getStorageSync('lang');
				
				uni.request({
					url:this.host + "/today/userRegistry",
					header:this.util.header(),
					method:'POST',
					data:this.regist,
					success: (res) => {
						if(res.data.data.flag == 0){
							this.modalName = '';
						}
						this.util.toast(res.data.data.msg);
					}
				});
			},
			refreshPersonData:function(){
				uni.request({
					url:this.host + "/today/refreshPersonData",
					header:this.util.header(),
					method:'POST',
					data:this.user,
					success: (res) => {
						if(res.data.data.flag == 0){
							this.user = res.data.data.user;
							uni.setStorageSync('user',this.user);
							this.modalName = '';
							uni.setStorageSync('index',true);
							uni.setStorageSync('timeline',true);
							this.util.toast(res.data.data.msg);
						}
					}
				});
			}
		},
		onLoad:function(){
			if(uni.getStorageSync('user')){
				this.user = uni.getStorageSync('user');
			}
		},
		onPullDownRefresh:function(){
			if(uni.getStorageSync('user') != null || this.user != null){
				this.refreshPersonData();
			}else{
				this.util.toast("请先登录");
			}
			uni.stopPullDownRefresh();
		}
	}
</script>

<style>
	.UCenter-bg {
		background-image: url(https://oss.byteyun.net/images/2020-04-18/bg1.jpg);
		background-size: cover;
		height: 500rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}
	
	.UCenter-bg text {
		opacity: 0.8;
	}
	
	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}
	
	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}
</style>
